我希望從任務列表切換到各任務內容詳細頁面時Tab bar可以暫時看不見，今天就來做此設定～

Stack

在開始講讓Tab bar看不見的方法之前先來提一下我畫面是如何堆疊的。

1. 做好的七個頁面（七個xxxScreen.js檔案）放在專案內名為screens的資料夾內
2. 在同一資料夾內新增一個index.js檔案
3. 將xxxScreen.js們以及Stack Navigation會用到的模組全部import進index.js檔案裡。（Stack Navigation的用法請參考這裡）
4. 之後將各母子頁面放在各自的Stack.Navigator並export出去

{/*index.js*/}
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import LocationScreen from './LocationScreen';
import DetailScreen from './DetailScreen';
import HomeScreen from './HomeScreen';
import ContactScreen from './ContactScreen';
import RankScreen from './RankScreen';
import EditScreen from './EditScreen';
import LoginScreen from './LoginScreen';

export const Stack = createStackNavigator();

export const LocationStack = () => {
    return (
        <Stack.Navigator>
          <Stack.Screen name="Home" component={LocationScreen}/>
          <Stack.Screen name="Detail" component={DetailScreen}/>      
        </Stack.Navigator>
    );
  }
  
export const ContactStack = () => {
    return (
        <Stack.Navigator>
          <Stack.Screen name="Home2" component={ContactScreen}/>
          <Stack.Screen name="Detail" component={DetailScreen}/>
        </Stack.Navigator>
    );
  }
  
export const HomeStack = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home3" component={HomeScreen} /> 
          <Stack.Screen name="Edit" component={EditScreen}/>  
        </Stack.Navigator>
    );
  }
  
export const RankStack = () => {
    return (
        <Stack.Navigator>
          <Stack.Screen name="Rank" component={RankScreen}/>     
        </Stack.Navigator>
    );
  }

之後再到有Tab.Navigator的那個檔案將Stack們匯入就好～(Tab.Navigator用法請參考這裡)

import { HomeStack, LocationStack, ContactStack, RankStack } from '../screens';

Tab bar

控制tab bar是否出現主要是在<Tab.Screen>標籤中設定參數options裡的tabBarVisible，只要以下這段程式碼就可以控制子頁面不出現Tab bar了～

<Tab.Screen name="首頁" component={HomeStack}
   options={props => {
      return {
        tabBarVisible: !props.route.state || props.route.state.index === 0,
      };
  }}
/>

＊小提示：如果寫成tabBarVisible:false就等於不要讓tab bar出現喔～